<template>
  <view class="content">
    <!-- 头部导航栏 -->
    <tm-navbar :leftWidth="750" title="" hideHome color="blue">
      <template v-slot:left>
        <tm-tabs
          :list="tabsTitle"
          activeFontColor="white"
          unSelectedColor="#7c90ad"
          transprent
          rang-key="name"
          :width="menuButtonLeft"
          default-name="1"
          v-model:active-name="selectKey"
        ></tm-tabs>
      </template>
    </tm-navbar>
    <!-- 滑动的页面 -->
    <swiper class="swiper" :current="+selectKey - 1" :disable-touch="true" :duration="0">
      <swiper-item v-for="item in tabsTitle" :key="item.key">
        <report-repairs class="body-item" :key="item.key"></report-repairs>
      </swiper-item>
    </swiper>
    <!-- 悬浮的按钮 -->
    <tm-float-button
      v-if="!floatMarketShow"
      :disabledScrollTo="false"
      position="br"
      :offset="[20, 64]"
      :btn="{ icon: 'tmicon-switch', linear: '', color: 'blue' }"
      @click="floatButtonClick"
    ></tm-float-button>
  </view>
  <!-- 浮窗按钮点击的弹框 -->
  <tm-drawer
    :round="0"
    inContent
    mask
    hideCancel
    okText="关闭"
    okColor="grey"
    placement="bottom"
    v-model:show="floatMarketShow"
    @close="drawerCloseMtthods"
  >
    <view class="drawer-body">
      <tm-text label="点击标签,切换到所选的待办列表" style="font-weight: bold"></tm-text>
      <view class="filter-view">
        <text
          class="filter-item"
          v-for="item in tabsTitle"
          :key="item.key"
          @click="drawerContentBtnClick(item)"
        >
          {{ item.name }}
        </text>
      </view>
    </view>
  </tm-drawer>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { torpx } from "../../../tmui/tool/function/util";
import ReportRepairs from "./components/report-repairs.vue";
let menuButtonLeft = 750;
// #ifdef MP-WEIXIN
menuButtonLeft = torpx(uni.getMenuButtonBoundingClientRect().left);
// #endif
const selectKey = ref("1");
const floatMarketShow = ref(false);
const tabsTitle = ref([
  {
    name: "报事报修",
    key: "1"
  },
  {
    name: "巡更",
    key: "2"
  },
  {
    name: "设备",
    key: "3"
  },
  {
    name: "抄表",
    key: "4"
  },
  {
    name: "审批",
    key: "5"
  },
  {
    name: "任务管理",
    key: "6"
  },

  {
    name: "品质核查",
    key: "7"
  },
  {
    name: "医疗运送",
    key: "8"
  }
]);
//底部悬浮按钮的点击事件
function floatButtonClick() {
  uni.hideTabBar({
    complete() {
      floatMarketShow.value = true;
    }
  });
}
function drawerCloseMtthods() {
  uni.showTabBar({
    animation: false
  });
}

function drawerContentBtnClick(item) {
  selectKey.value = item.key;
  floatMarketShow.value = false;
  drawerCloseMtthods();
}
</script>

<style lang="scss" scoped>
.content {
  width: 750rpx;
  height: 100vh;
}

.swiper {
  height: calc(100% - 44px - var(--status-bar-height));
  background-color: pink;
}
.header-tab {
  background-color: blue;
  .head-plachodle {
    height: var(--status-bar-height);
  }
}
.drawer-body {
  width: 750rpx;
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .filter-view {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: 20rpx;
    .filter-item {
      background-color: lightpink;
      border: 2rpx solid $uni-bottom-linecolor;
      width: 223rpx;
      margin: 0 0 20rpx 15rpx;
      padding: 10rpx 0;
      text-align: center;
    }
  }
}
</style>
